<template>
	<!-- 管理简历页面 -->
	<view class="f">
		<view class="w">
			<!-- 盒子 -->
			<view  class="box" >
				<!-- 图片 -->
				<view class="img">
					<image src="../../static/page1.jpg" mode=""></image>
				</view>
				<!-- 文字 -->
				<view class="font">
					<text>在线简历</text>
					<text>前端工程师</text>
					<text>更新时间：2023-01-01</text>
				</view>
				<!-- 按钮 -->
				<button @click="appear()">操作</button> 
			</view>
			<!--w的结束-->
		</view>
		<!-- 选项操作 -->
		<view class="sBox" v-show="isActive">
			<view class="select" >
		<navigator url="/subpkg/myResume/writeMyResume">编辑简历</navigator>
		<navigator  url="/subpkg/myResume/viewMyResume" open-type="navigate">预览简历</navigator>
		<navigator url="" @click="del()">删除简历</navigator>
		<navigator url="">选择简历模板</navigator>
			<view @click="unAppear()">取消</view>
		</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		data(){
			return{
				isActive:false,
				
			}
		},
		methods:{
			// 点击操作按钮出现选项
			appear(){
				this.isActive = !this.isActive
				// console.log("123")
			},
			// 点击取消选项消失
			unAppear(){
				this.isActive = !this.isActive
			},
			del(){
				//删除简历
				// console.log("")
				// alert("你确实要删除简历吗？")
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*  */
	/* .f{
		position: relative;
	} */
	.w{
		/* position: relative; */
		margin:  30rpx  40rpx 0;
	}
	.box{
		position: relative;
		display: flex;
		/* justify-content: space-around; */
		margin-bottom: 10rpx;
		padding: 0 40rpx;
		align-items: center;
		width: 100%;
		height: 300rpx;
		border: 1px solid black;
		border-radius: 15rpx;
		/* box-shadow: 0 0 2px 2px rgba(0,0,0,.2); */
	}
	/* 图片 */
	.box .img{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
		/* vertical-align: middle; */
	}
	/* 文字 */
	.font{
		display: flex;
		flex-direction: column;
		/* justify-content: space-between; */
	}
	.font>text{
		margin-bottom: 20rpx;
		font-size: 28rpx;
		/* color: #9f9f9f; */
		color: black;
	}
	.font>text:first-child{
		/* font-weight: 700; */
		font-size: 40rpx;
		color: black;
		
	}
	/* 按钮 */
	.box button{
		position: absolute;
		top: 100rpx;
		right: 40rpx;
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #00dcb6;
		color: #fff;
		font-size: 30rpx
	}
	/* 选项操作 */
	.sBox .select{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		background-color:#fffcf3;
	}
	.sBox .select>navigator,.sBox .select>view{
		display: inline-block;
		width: 100%;
		/* height: rpx; */
		line-height: 100rpx;
		border-bottom: 1px solid #ccc;
		font-size: 40rpx;
	}
	.sBox .select>text:last-child{
		/* background-color: red; */
		border-bottom: none;
	}
</style>